<template>
	<view>
		<!-- 没有登录 -->
		<view class="avatar" v-if="!islogin" @click="login">
			<view class="ca">
				<image src="../../../static/Mine/nolo.png"></image>
			</view>
			<view class="ca2">
				<view class="nickname">请先登录</view>
				<!-- <view class="nickname">ID：123456789</view> -->
			</view>
		</view>
		<!-- 登录成功 -->
		<view class="avatar" v-if="islogin">
		<view class="ca">
			<image src="../../../static/Mine/5.png"></image>
		</view>
		<view class="ca2">
			<view class="nickname">个人/经销商</view>
			<view class="nickid">ID：123456789</view>
		</view>
		</view>

		<view class="cut-off-rule"></view>
		<view class="content">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index">
					<block @click="myurl(item.url)">
					<image class="content_image" :src="item.icon"></image>
					<view class="uni-list-cell-navigate uni-navigate-right">
						<view>{{item.title}}</view>
					</view>
					</block>
				</view>
			</view>
		</view>
		<view class="cut-off-rule"></view>
		<view class="content">
			<view class="uni-list">
				<block v-for="(item,index) in list2"
					:key="index">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="myurl(item.url)">
					<image class="content_image" :src="item.icon"></image>
					<view class="uni-list-cell-navigate uni-navigate-right">
						{{item.title}}
					</view>
				</view>
				</block>
			</view>
		</view>
		<view class="cut-off-rule"></view>
		<view @click="logout">
			<button class="loginout">退出登录</button>
		</view>
		<view class="cut-off-rule2"></view>

	</view>

</template>
<script>
	export default {
		data() {
			return {
				islogin: false,
				avatar: "../../../static/Mine/5.png",
				list: [{
						title: "我的订单",
						icon: '../../../static/Mine/dingdan.png',
						url:'../orderList/orderList'
					},
					{
						title: "我的协议",
						icon: '../../../static/Mine/caiyouduo_wode-yonghuxieyi.png',
					},
					{
						title: "推荐有礼",
						icon: '../../../static/Mine/wode-tuijianyouli.png',
					}
				],
				list2: [{
						title: "关于我们",
						icon: '../../../static/Mine/guanyuwomen.png',
						url:'../AboutUs/AboutUs',
					},
					{
						title: "常见问题",
						icon: '../../../static/Mine/wenti.png',
						url:'/pages/Mine/coupleback/coupleback'
					},
					{
						title: "联系我们",
						icon: '../../../static/Mine/lianxi.png',
					},
					{
						title: "优惠券",
						icon: '../../../static/Mine/youhuijuan.png',
						url:'/pages/shop/coupon'
					},
				]
			}
		},
		methods: {
			logout(){
				uni.removeStorageSync('token');
				uni.showToast({
					title:'退出成功',
					duration:2000,
					
				})
				},
			myurl(url){
				console.log(url)
				uni.navigateTo({
					url:url,
					fail(fail) {
						console.log(fail)
					}
				})
			},
			login() {
				this.islogin = true
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #FFF;
	}

	.loginout {
		background-color: #FFF;
		border: none;
	}

	.content_image {
		width: 45rpx;
		height: 45rpx;
		margin-left: 20rpx;
	}

	.avatar {
		margin-top: 30rpx;
		margin-bottom: 70rpx;
		.ca {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;

			image {
				border-radius: 50%;
				top: 50%;
				text-align: center;
				height: 170rpx;
				width: 170rpx;
				margin-bottom: 20rpx;
			}
			}
			.ca2{
				display: flex;				
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;
				margin-bottom: 20rpx;
				.nickname {
					vertical-align:middle;
					font-family: PingFangSC-Medium;
					font-size: 40rpx;
					font-weight: 400;
					color: #313131;
					margin-bottom: 20rpx;
				}
				.nickid{
					display: block;
					color: #9C9C9C;
					z-index: 999;
					position: absolute;
					margin-top: 100rpx;
				}
			}

			
	}

	.cut-off-rule {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}

	.cut-off-rule2 {
		width: 100%;
		height: 200rpx;
		background-color: #F5F5F5;
	}
</style>
